{% extends "admin/base.html" %}

{% block stylesheets %}
{% endblock %}

{% block content %}
	<div class="jumbotron">
		<div class="container">
			<h1>Linear Unlocking</h1>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<h2>Create new chain:</h2>

				<div class="form-group">
					<label for="category">Challenge category</label>
					<select class="form-control" id="category-select" name="category">
						<option>--</option>
						{% for cat in challenge_categories %}
							<option>{{ cat.name }}</option>
						{% endfor %}
					</select>
				</div>

				<form id="linear_unlocking_create_form" method="POST" action="/admin/plugins/linear-unlocking" style="display:none">
					<div class="form-group">
						<label for="name">Name</label>
						<input pattern=".{1,}" required class="form-control" name="name" placeholder="Enter chain name" type="text">
					</div>

					<label>Challenges to be unlocked in order</label>
					<ol class="form-group" id="challenge-list" style="padding:0;">
					</ol>

					<div class="form-group" style="text-align:center">
						<button class="btn btn-theme btn-outlined" id="add-challenge-button" type="button">Add Another Succeeding Challenge</button>
					</div>

					<input id="nonce" name='nonce' type='hidden' value="{{ nonce }}">
					<div class="form-group">
						<button class="btn btn-primary float-right" type="submit">Create</button>
					</div>
				</form>
			</div>
			
			<div class="col-md-6 offset-md-1">
				<h2>Existing chains:</h2>
				{% for lu_chain in linear_unlocking_chains %}
					<p>
						<div class="form-check float-right mt-2">
							<div class="checkbox">
								<input class="form-check-input toggle_hide" value="{{ lu_chain.id }}" type="checkbox"
									{% if lu_chain.is_hidden %} checked="checked" {% endif %}
								>
								Hide locked challenges
							</div>

							<form method="POST" action="/admin/plugins/linear-unlocking/delete">
								<input id="nonce" name='nonce' type='hidden' value="{{ nonce }}">
								<button value="{{ lu_chain.id }}" class="btn btn-danger float-right linear_unlocking_delete" type="submit">Delete</button>
							</form>
						</div>
						
						<small>{{ lu_chain.chain[0].chalcategory }}</small>
						<h4>{{ lu_chain.name }}</h4>
						<ol>
						{% for chain_entry in lu_chain.chain %}
							<li>{{ chain_entry.chalname }}</li>
						{% endfor %}
						</ol>
					</p>
				{% endfor %}
			</div>

		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script type="text/javascript">
		var challenge_categories = {
			{% for cat in challenge_categories %}
				"{{ cat.name }}":{
					{% for chal in cat.challenges %}
						{{ chal.id }}:"{{ chal.name }}",
					{% endfor %}
				},
			{% endfor %}
		};
		var linearunlocking_used_chal_ids = [{% for lu_chain in linear_unlocking_chains %}{% for chain_entry in lu_chain.chain %}{{ chain_entry.chalid }}, {% endfor %}{% endfor %}];
	</script>
	<script src="{{ request.script_root }}/linear-unlocking/static/linear-unlocking-config.js"></script>
{% endblock %}
